import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Table,
  Card,
  Button,
  Divider,
  PageHeader,
  Row,
  Col,
  Form,
  Input,
  Select,
  Badge,
  Modal,
} from 'antd';
import 'antd/dist/antd.css';

class ConfigModal extends React.PureComponent {
  //渲染
  render() {
    return (
      <Modal
          title="Modal"
          visible={true}
          onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
        <Card bordered={false} style={{ marginTop: 24 }}>
          <Form.Item label="配置的服务地址">
            <Input placeholder="请输入渠道配置的地址" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="配置参数">
            <Input placeholder="请输入配置参数" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="Accept">
            <Input placeholder="请输入Accept" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="AcceptEncoding">
            <Input placeholder="请输入AcceptEncoding" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="代理方式">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="HEAD">
            <Input placeholder="请输入请求头" style={{ width: 300 }} />
          </Form.Item>
          <Button type="primary">保存</Button>
        </Card>
      </Modal>

    );
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };
}



//字面意思就是，把models的state变成组件的props
function mapStateToProps(state) {
  console.log(state);
  return { channel: state.channel } // test就是models命名空间名字;
}
export default connect(mapStateToProps)(AddChannelPage)   
